<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element UI 深夜模式演示 (默认深夜模式)</title>
    <!-- 引入 Element UI CSS -->
    <link rel="stylesheet" href="../lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f7fa;
            transition: all 0.3s ease-in-out;
        }
        
        body.dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }
        
        .dark-mode .header {
            background-color: #2a2a2a;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        }
        
        .header h1 {
            margin: 0;
            color: #303133;
            transition: color 0.3s ease-in-out;
        }
        
        .dark-mode .header h1 {
            color: #ffffff;
        }
        
        .controls {
            display: flex;
            gap: 10px;
        }
        
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }
        
        .dark-mode .demo-section {
            background-color: #2a2a2a;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        }
        
        .demo-section h2 {
            margin-top: 0;
            color: #303133;
            transition: color 0.3s ease-in-out;
        }
        
        .dark-mode .demo-section h2 {
            color: #ffffff;
        }
        
        .component-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .component-demo {
            padding: 15px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            transition: all 0.3s ease-in-out;
        }
        
        .dark-mode .component-demo {
            border-color: #404040;
        }
        
        .component-demo h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #303133;
            transition: color 0.3s ease-in-out;
        }
        
        .dark-mode .component-demo h3 {
            color: #ffffff;
        }
        
        .status-info {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f5f7fa;
            border-radius: 4px;
            transition: all 0.3s ease-in-out;
        }
        
        .dark-mode .status-info {
            background-color: #404040;
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .status-label {
            font-weight: bold;
            color: #606266;
            transition: color 0.3s ease-in-out;
        }
        
        .dark-mode .status-label {
            color: #b0b0b0;
        }
        
        .status-value {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-success {
            background-color: #f0f9ff;
            color: #67c23a;
        }
        
        .status-info {
            background-color: #f4f4f5;
            color: #909399;
        }
        
        .status-warning {
            background-color: #fdf6ec;
            color: #e6a23c;
        }
        
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .controls {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .component-grid {
                grid-template-columns: 1fr;
            }
            
            .status-info {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面头部 -->
        <div class="header">
            <h1>🌙 Element UI 深夜模式演示 (默认深夜模式)</h1>
            <div class="controls">
                <button id="toggleBtn" class="el-button el-button--primary">
                    <i id="toggleIcon" class="el-icon-moon"></i>
                    <span id="toggleText">切换深夜模式</span>
                </button>
                <button id="autoBtn" class="el-button el-button--info">
                    <span id="autoText">开启自动模式</span>
                </button>
                <button id="resetBtn" class="el-button el-button--warning">
                    重置设置
                </button>
            </div>
        </div>

        <!-- 状态信息 -->
        <div class="demo-section">
            <h2>📊 当前状态</h2>
            <div class="status-info">
                <div class="status-item">
                    <span class="status-label">深夜模式:</span>
                    <span id="darkModeStatus" class="status-value status-info">检查中...</span>
                </div>
                <div class="status-item">
                    <span class="status-label">自动模式:</span>
                    <span id="autoModeStatus" class="status-value status-info">检查中...</span>
                </div>
                <div class="status-item">
                    <span class="status-label">本地存储:</span>
                    <span id="storageStatus" class="status-value status-info">检查中...</span>
                </div>
                <div class="status-item">
                    <span class="status-label">系统主题:</span>
                    <span id="systemThemeStatus" class="status-value status-info">检查中...</span>
                </div>
            </div>
        </div>

        <!-- 组件演示 -->
        <div class="demo-section">
            <h2>🎨 组件演示</h2>
            <div class="component-grid">
                <!-- 按钮组件 -->
                <div class="component-demo">
                    <h3>按钮组件</h3>
                    <el-button>默认按钮</el-button>
                    <el-button type="primary">主要按钮</el-button>
                    <el-button type="success">成功按钮</el-button>
                    <el-button type="warning">警告按钮</el-button>
                    <el-button type="danger">危险按钮</el-button>
                </div>

                <!-- 输入框组件 -->
                <div class="component-demo">
                    <h3>输入框组件</h3>
                    <el-input id="demoInput" placeholder="请输入内容" style="margin-bottom: 10px;"></el-input>
                    <el-input placeholder="禁用状态" disabled></el-input>
                </div>

                <!-- 选择器组件 -->
                <div class="component-demo">
                    <h3>选择器组件</h3>
                    <el-select id="demoSelect" placeholder="请选择" style="width: 100%; margin-bottom: 10px;">
                        <el-option label="选项1" value="1"></el-option>
                        <el-option label="选项2" value="2"></el-option>
                        <el-option label="选项3" value="3"></el-option>
                    </el-select>
                    <el-radio-group id="demoRadio">
                        <el-radio label="radio1">单选1</el-radio>
                        <el-radio label="radio2">单选2</el-radio>
                    </el-radio-group>
                </div>

                <!-- 复选框组件 -->
                <div class="component-demo">
                    <h3>复选框组件</h3>
                    <el-checkbox-group id="demoCheckbox">
                        <el-checkbox label="checkbox1">复选框1</el-checkbox>
                        <el-checkbox label="checkbox2">复选框2</el-checkbox>
                        <el-checkbox label="checkbox3">复选框3</el-checkbox>
                    </el-checkbox-group>
                </div>

                <!-- 开关组件 -->
                <div class="component-demo">
                    <h3>开关组件</h3>
                    <el-switch id="demoSwitch" style="margin-bottom: 10px;"></el-switch>
                    <br>
                    <el-rate id="demoRate"></el-rate>
                </div>

                <!-- 滑块组件 -->
                <div class="component-demo">
                    <h3>滑块组件</h3>
                    <el-slider id="demoSlider" :max="100" style="margin-bottom: 10px;"></el-slider>
                    <el-progress :percentage="50" style="margin-bottom: 10px;"></el-progress>
                    <el-progress :percentage="80" status="success"></el-progress>
                </div>

                <!-- 标签组件 -->
                <div class="component-demo">
                    <h3>标签组件</h3>
                    <el-tag>默认标签</el-tag>
                    <el-tag type="success">成功标签</el-tag>
                    <el-tag type="info">信息标签</el-tag>
                    <el-tag type="warning">警告标签</el-tag>
                    <el-tag type="danger">危险标签</el-tag>
                </div>

                <!-- 警告框组件 -->
                <div class="component-demo">
                    <h3>警告框组件</h3>
                    <el-alert title="成功提示的文案" type="success" style="margin-bottom: 10px;"></el-alert>
                    <el-alert title="消息提示的文案" type="info" style="margin-bottom: 10px;"></el-alert>
                    <el-alert title="警告提示的文案" type="warning" style="margin-bottom: 10px;"></el-alert>
                    <el-alert title="错误提示的文案" type="error"></el-alert>
                </div>
            </div>
        </div>

        <!-- 下拉菜单和弹框演示 -->
        <div class="demo-section">
            <h2>🔽 下拉菜单和弹框演示</h2>
            <div class="component-grid">
                <!-- 下拉菜单组件 -->
                <div class="component-demo">
                    <h3>下拉菜单组件</h3>
                    <el-dropdown @command="handleDropdownCommand" style="margin-bottom: 10px;">
                        <el-button type="primary">
                            下拉菜单 <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="option1">选项一</el-dropdown-item>
                            <el-dropdown-item command="option2">选项二</el-dropdown-item>
                            <el-dropdown-item command="option3">选项三</el-dropdown-item>
                            <el-dropdown-item command="option4" divided>选项四</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <p style="margin: 0; color: var(--el-color-text-regular, #606266);">选择结果: {{ dropdownResult }}</p>
                </div>

                <!-- 弹框组件 -->
                <div class="component-demo">
                    <h3>弹框组件</h3>
                    <el-button type="primary" @click="showDialog = true" style="margin-bottom: 10px;">打开弹框</el-button>
                    <el-button type="success" @click="showMessage">显示消息</el-button>
                    <el-button type="warning" @click="showNotification">显示通知</el-button>
                </div>

                <!-- 抽屉组件 -->
                <div class="component-demo">
                    <h3>抽屉组件</h3>
                    <el-button type="primary" @click="showDrawer = true">打开抽屉</el-button>
                    <p style="margin: 10px 0 0 0; color: var(--el-color-text-regular, #606266);">从右侧滑出的抽屉面板</p>
                </div>
            </div>
        </div>

        <!-- 表格演示 -->
        <div class="demo-section">
            <h2>📋 表格演示</h2>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="city" label="城市"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页演示 -->
        <div class="demo-section">
            <h2>📄 分页演示</h2>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div>
    </div>

    <!-- 弹框 -->
    <el-dialog title="弹框标题" :visible.sync="showDialog" width="50%">
        <span>这是一个弹框组件的内容区域。在深夜模式下，弹框背景、边框和文字都会自动适配深色主题。</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="confirmDialog">确定</el-button>
        </span>
    </el-dialog>

    <!-- 抽屉 -->
    <el-drawer title="抽屉标题" :visible.sync="showDrawer" direction="rtl" size="30%">
        <div style="padding: 20px;">
            <p>这是一个抽屉组件的内容区域。</p>
            <p>在深夜模式下，抽屉背景、边框和文字都会自动适配深色主题。</p>
            <el-button type="primary" @click="showDrawer = false">关闭抽屉</el-button>
        </div>
    </el-drawer>

    <!-- 引入 Vue 和 Element UI -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="../lib/index.js"></script>
    <script>
        // 初始化 Vue 应用
        new Vue({
            el: '.container',
            data: {
                isDarkMode: false,
                isAutoMode: false,
                currentPage: 1,
                showDialog: false,
                showDrawer: false,
                dropdownResult: '未选择',
                tableData: [
                    { name: '张三', age: 25, city: '北京' },
                    { name: '李四', age: 30, city: '上海' },
                    { name: '王五', age: 28, city: '广州' },
                    { name: '赵六', age: 32, city: '深圳' }
                ]
            },
            mounted() {
                this.initDarkMode();
                this.updateStatus();
            },
            methods: {
                // 初始化深夜模式
                initDarkMode() {
                    // 检查是否已加载 Element UI
                    if (window.ElementUIDarkMode) {
                        window.ElementUIDarkMode.init();
                        this.updateDarkModeStatus();
                    } else {
                        // 如果 Element UI 还没加载完成，等待一下
                        setTimeout(() => {
                            this.initDarkMode();
                        }, 100);
                    }
                },
                
                // 更新深夜模式状态
                updateDarkModeStatus() {
                    if (window.ElementUIDarkMode) {
                        this.isDarkMode = window.ElementUIDarkMode.isEnabled();
                        this.updateToggleButton();
                    }
                },
                
                // 更新切换按钮
                updateToggleButton() {
                    const toggleBtn = document.getElementById('toggleBtn');
                    const toggleIcon = document.getElementById('toggleIcon');
                    const toggleText = document.getElementById('toggleText');
                    
                    if (this.isDarkMode) {
                        toggleIcon.className = 'el-icon-sunny';
                        toggleText.textContent = '切换浅色模式';
                    } else {
                        toggleIcon.className = 'el-icon-moon';
                        toggleText.textContent = '切换深夜模式';
                    }
                },
                
                // 切换深夜模式
                toggleDarkMode() {
                    if (window.ElementUIDarkMode) {
                        window.ElementUIDarkMode.toggle();
                        this.updateDarkModeStatus();
                        this.updateStatus();
                        this.showMessage('主题已切换');
                    }
                },
                
                // 切换自动模式
                toggleAutoMode() {
                    if (this.isAutoMode) {
                        this.isAutoMode = false;
                        this.showMessage('已关闭自动模式', 'info');
                    } else {
                        this.isAutoMode = true;
                        if (window.ElementUIDarkMode) {
                            window.ElementUIDarkMode.autoSwitch();
                        }
                        this.showMessage('已开启自动模式', 'success');
                    }
                    this.updateStatus();
                },
                
                // 重置设置
                resetSettings() {
                    if (window.ElementUIDarkMode) {
                        window.ElementUIDarkMode.disable();
                        this.isAutoMode = false;
                        this.updateDarkModeStatus();
                        this.updateStatus();
                        this.showMessage('设置已重置', 'warning');
                    }
                },
                
                // 更新状态显示
                updateStatus() {
                    // 深夜模式状态
                    const darkModeStatus = document.getElementById('darkModeStatus');
                    darkModeStatus.textContent = this.isDarkMode ? '已启用' : '已禁用';
                    darkModeStatus.className = `status-value ${this.isDarkMode ? 'status-success' : 'status-info'}`;
                    
                    // 自动模式状态
                    const autoModeStatus = document.getElementById('autoModeStatus');
                    autoModeStatus.textContent = this.isAutoMode ? '已开启' : '已关闭';
                    autoModeStatus.className = `status-value ${this.isAutoMode ? 'status-success' : 'status-info'}`;
                    
                    // 本地存储状态
                    const storageStatus = document.getElementById('storageStatus');
                    try {
                        const stored = localStorage.getItem('element-ui-dark-mode');
                        storageStatus.textContent = stored === 'true' ? '已存储深夜模式' : '已存储浅色模式';
                        storageStatus.className = 'status-value status-info';
                    } catch (error) {
                        storageStatus.textContent = '无法访问';
                        storageStatus.className = 'status-value status-warning';
                    }
                    
                    // 系统主题状态
                    const systemThemeStatus = document.getElementById('systemThemeStatus');
                    if (window.matchMedia) {
                        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                        systemThemeStatus.textContent = isDark ? '深色主题' : '浅色主题';
                        systemThemeStatus.className = 'status-value status-info';
                    } else {
                        systemThemeStatus.textContent = '不支持';
                        systemThemeStatus.className = 'status-value status-warning';
                    }
                },
                
                // 显示消息
                showMessage(message, type = 'success') {
                    this.$message({
                        message: message,
                        type: type,
                        duration: 2000
                    });
                },
                
                // 表格操作
                handleEdit(index, row) {
                    this.showMessage(`编辑第${index + 1}行数据: ${row.name}`, 'info');
                },
                
                handleDelete(index, row) {
                    this.showMessage(`删除第${index + 1}行数据: ${row.name}`, 'warning');
                },
                
                // 分页操作
                handleSizeChange(val) {
                    this.showMessage(`每页显示 ${val} 条`, 'info');
                },
                
                handleCurrentChange(val) {
                    this.showMessage(`当前页: ${val}`, 'info');
                },
                
                // 下拉菜单命令处理
                handleDropdownCommand(command) {
                    const options = {
                        'option1': '选项一',
                        'option2': '选项二',
                        'option3': '选项三',
                        'option4': '选项四'
                    };
                    this.dropdownResult = options[command] || command;
                    this.showMessage(`选择了: ${this.dropdownResult}`, 'success');
                },
                
                // 确认弹框
                confirmDialog() {
                    this.showMessage('您点击了确定按钮', 'success');
                    this.showDialog = false;
                },
                
                // 显示消息提示
                showMessage() {
                    this.$message({
                        message: '这是一条消息提示',
                        type: 'success',
                        duration: 3000
                    });
                },
                
                // 显示通知
                showNotification() {
                    this.$notify({
                        title: '通知标题',
                        message: '这是一条通知消息，用于向用户展示重要信息。',
                        type: 'info',
                        duration: 5000
                    });
                }
            }
        });

        // 绑定按钮事件
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('toggleBtn').addEventListener('click', function() {
                // 通过 Vue 实例调用方法
                const vueInstance = document.querySelector('.container').__vue__;
                if (vueInstance) {
                    vueInstance.toggleDarkMode();
                }
            });
            
            document.getElementById('autoBtn').addEventListener('click', function() {
                const vueInstance = document.querySelector('.container').__vue__;
                if (vueInstance) {
                    vueInstance.toggleAutoMode();
                }
            });
            
            document.getElementById('resetBtn').addEventListener('click', function() {
                const vueInstance = document.querySelector('.container').__vue__;
                if (vueInstance) {
                    vueInstance.resetSettings();
                }
            });
        });
    </script>
</body>
</html> 